@charset 'utf-8';

@import 'common';

@mixin h2{
    font-size: 29.96px;
    color: #2a2a2a;
    margin-top: 30px;
    margin-bottom: 17px;
}
@mixin p{
    font-size: 12px;
    line-height: 30px;
    color: #898989;
    margin-bottom: 30px;
}
@mixin pic{
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}
@mixin padding_top{
    padding-top: 19.9501%
}
.banner-wrapper{
    width: 100%;
    padding: 0;
    margin-top: 50px;
    img{
        display: block;
        width: 100%;
        height: auto;
    }
}
.game-wrapper{
    .game-bgi{
        background: url('../images/game-pic.png') no-repeat left;
        h2{
            @include h2;
            text-align: right;
        }
        .text{
            @include p;
            text-align: right;
        }
        .hot{
            position: relative;
            width: 0;
            height: 0;
            border-top: 85px solid #e14738;
            border-left: 20px solid #e14738;
            border-right: 20px solid #e14738;
            border-bottom: 15px solid #f7f7f7;
            p{
                position: absolute;
                top: -75px;
                left: -10px;
                font-size: 20px;
                color: #ffffff;
            }
        }
        .pic-wrapper{
            .pic{
                margin-bottom: 30px;
                img{
                    @include pic;
                }
            }
        }
    } 
}
.game-wrapper2{
    .game-bgi{
        background: url('../images/game-pic2.png') no-repeat right;
        background-position: 100% 100%;
        h2{
            @include h2;
        }
        p{
            @include p;
        }
        .pic-wrapper{
            margin-bottom: 30px;
            img{
                @include pic;
            }
        }
        
    }
    
}
.case{
    padding: 80px 0;
    h2{
        font-size: 36px;
        color: #010101;
    }
    .pic-wrapper{
        margin-top: 40px;
        img{
            @include pic;
        }
        
    }
    p{
        font-size: 14px;
        color: #2a2a2a;
        text-align: center;
        margin-top: 10px;
    }
}
@media only screen and (max-width: 991px){
    .game-wrapper,.game-wrapper2{
        .game-bgi{
            background: none;
        }
    }
}
@media only screen and (max-width: 767px){
    .case{
        padding: 30px 0;
        h2{
            font-size: 29.96px;
        }
        .pic-wrapper{
            margin-top: 20px;
        }
    }
}